<template>
      <div>
         <div class="aa">
          <h2 class="aaa">{{addInfo.title}}</h2>
          <h5 class="b1">发表时间：{{addInfo.add_time | dateFormat }}</h5>
          <h5 class="b2">点击：{{addInfo.click}}</h5>
        </div>
          <div class='aa2'>
             <ul >
          <li v-for='item in addImg' :key='item.id'> <van-image
            @click="onClill(item.src)"
              width="100%"
              height="100%"
              fit="contain"
               lazy-load
              :src="item.src"
             />
             </li>
          </ul>
             <h3> {{addInfo.content}}</h3>
          </div>
               <van-form>
             <div  class='aa3'>
               <h4 class='ah4'>发表评论</h4>
                <van-cell-group>
                <van-field v-model="value" :data='list'  height='100px'  type="textarea" placeholder="请输入留言" />
                <van-button type="info" size="large" @click="addList(this.value)">提交按钮</van-button>
                <van-list
                v-for="item in list" :key="item.index" :title="item"
             finished-text="没有更多了">
               <van-cell>
                 <div class="xian"> 第 0 楼 用户:{{item.user_name}} 发表时间:{{item.add_time | dateFormat }}</div>
                 <div class="xian2">{{item.content}}</div>
               </van-cell>
           </van-list>
           </van-cell-group>
           </div>
          </van-form>
      </div>
 </template>
<script>
import { ImagePreview } from 'vant'
// import { lisst } from '../.././components/lisst.vue'

export default {
  data () {
    return {
      imgid: '',
      addInfo: [],
      addImg: [],
      value: '',
      list: [],
      loading: false,
      finished: false,
      artid: 43,
      pageid: 1
    }
  },
  created () {
    this.getInfo()
    this.getImgid()
    this.getIndex()
  },
  methods: {
    async getInfo (item) {
      const { data: res } = await this.$axios.get(`/api/getimageInfo/${this.$route.params.id}`)
      // console.log(res)
      this.addInfo = res.message[0]
    },
    async getImgid () {
      const { data: res } = await this.$axios.get(`/api/getthumimages/${this.$route.params.id}`)
      // console.log(res)
      this.addImg = res.message
    },
    onClill (item) {
      ImagePreview({ images: [item], closeable: true })
    },
    async getIndex (item) {
      const { data: res } = await this.$axios.get(`/api/getcomments/${this.artid}?pageindex=${this.pageid}`)
      console.log(res)
      this.list = res.message
    },
    addList (item) {
      this.list.push({
      })
    }
  }
}
</script>
<style scoped lang="less">
.xian{
  width: 100%;
  background-color: #ccc;
  font-size: 12px
}
ul{
  overflow: hidden;
  position: flex;
}
li{
 float: left;
 width:30%;
 height: 500px;
 padding: 10px;
 box-sizing:boder-box
}
.aa{
  position: relative;
  margin: 0 10px;
  height: 100px;
  // overflow: hidden;
}
.aa2{
  border-top:2px solid black;
    margin: 0 10px;
}
.aaa{
  margin-top:20px;
  color: #1989fa;
  text-align: center;
  font-size: 14px;
}
.b2{
  position: absolute;
   right:0;
   top:80px;
}
.b1{
  position: absolute;
  left:0;
  top:80px;
}
.b3{
  display: block;
  width: 100%;
  color:black;
  height: 0.2;
}
.aa3{
  margin: 0 10px;
  height: 400px;
  background-color: #ccc
}
.ah4{
   border-bottom:2px solid black;
}
</style>
